
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单页</title>
    <link rel="stylesheet" href="stylesheets/order.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
    <div class="cart-flow">
        <ul>
            <li>
                <div>1</div>
                <span>查看购物车</span>
            </li>
            <li>
                <div style="color:black">2</div>
                <span style="color:black">订单确认</span>
            </li>
            <li>
                <div>3</div>
                <span>订单支付</span>
            </li>
        </ul>
    </div>
    <div class="setlement-goods h-clearfix">
        <div class="setlement-goods-details">
            <h1 class="setlement-goods-details-title">订单明细-快递配送</h1>
            <ul class="setlement-goods-details-item-list">
                <li class="setlement-goods-details-item">
                    <h2>
                        选择收货地址
                        <a class="btn notice-word " href="#" data-target="#myModal" data-toggle="modal">新增收货地址</a>
                        <div class=" modal fade" id="myModal" tabindex="-1" role="dialog"
                            aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h3 class="modal-title" id="myModalLabel">新增收货地址</h3>
                                    </div>
                                    <div class="modal-body">
                                        <p>收货人*</p>
                                        <input type="text"
                                            style="border: rgba(0, 0, 0, 0.616) solid 1px; width: 160px;height:40px; " id="person">
                                        <p>所在地区*</p>
                                        <div class="diqu_div">

                                            <select class="sheng" id="sheng">
                                                <option>请选择</option>
                                            </select>
                                            <span>省</span>
                                            <select class="shi" id="shi"></select>
                                            <span>市</span>
                                            <select class="qu" id="qu"></select>
                                            <span>区</span>
                                        </div>
                                        <p>详细地址*</p>
                                        <input type="text"
                                            style="border: rgba(0, 0, 0, 0.616) solid 1px; width: 400px;height: 40px;">
                                        <p>邮编</p>
                                        <input type="text"
                                            style="border: rgba(0, 0, 0, 0.616) solid 1px; width: 160px;height: 40px;">
                                        <p>手机号*</p>
                                        <select>
                                            <option value="大陆">中国大陆+86</option>
                                            <option value="香港">中国香港特别行政区+852</option>

                                        </select>
                                        <input type="tel" maxlength="11"
                                            style="border: rgba(0, 0, 0, 0.616) solid 1px; width: 160px;height: 40px;">
                                        <p>为完成商品配送，我们将收集姓名、电话和收货地址等信息</p>
                                    
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" onclick="exec()"
                                            data-dismiss="modal" >确认</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </h2>
                    <p>
                        <span class="notice"></span>
                        <span style="color:red" id="message">请填写收货信息</span>
                    </p>

                </li>
                <li class="setlement-goods-details-item">
                    <h2>商品信息</h2>
                    <table class="setlement-goods-details-table">
                        <thead>
                            <tr>
                                <th width="30%">商品信息</th>
                                <th width="20%">尺码/颜色</th>
                                <th width="20%">价格</th>
                                <th width="10%">数量</th>
                                <th width="20%">小计</th>
                            </tr>


                        </thead>
                        <tbody>
                            <tr class="shopping_product_list">
                                <td class="tp" width="30%">
                                    <img src="https://www.uniqlo.cn/hmall/test/u0000000030021/sku/80/COL10.jpg" alt=""
                                        class="pic">
                                    <div class="tex">
                                        <p>秋冬 女装 长绒摇粒绒拉链茄克(长袖 外套保暖珊瑚绒)</p>
                                        <p><span class="seven">7天无理由退换</span></p>
                                    </div>

                                </td>
                                <td class="tp" width="20%">
                                    <div>
                                        <div class="size">
                                            <div>尺码:</div>
                                            <div class="wsize">165/85A/M</div>
                                        </div>
                                        <div class="col">
                                            <div>颜色:</div>
                                            <div class="wcol">红色</div>
                                        </div>
                                    </div>

                                </td>
                                <td class="tp" width="20%">
                                    <p >￥200</p>
                                    <p><span>初上市价格:</span>￥200</p>
                                </td>
                                <td class="tp" width="10%"><input type="text" value="1" onblur="productCount()"></td>
                                <td class="tp" width="20%" >￥<span id="price">200</span></td>
                            </tr>
                        </tbody>
                    </table>
                </li>
                <li class="setlement-goods-details-item">
                    <h2>促销信息</h2>
                    <form action="">
                        <input type="radio" name="rd1" id="" checked>9.27-10.7 会员乐庆国庆欢乐购 (门店急送订单及部分商品除外)</br>
                        <input type="radio" name="rd1" id="">不适用促销优惠
                    </form>
                </li>
                <li class="setlement-goods-details-item">
                    <h2>
                        优惠券
                        <a class="btn" href="#">
                            <span class="coupon-select" data-target="#Modal" data-toggle="modal">兑换</span>
                        </a>
                        <!-- Modal -->
                        <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">我的优惠券</h4>
                                    </div>
                                    <div class="modal-body">
                                        <input type="text" name="" id="" class="ctext" value="请输入兑换码">
                                        <button type="button" style="width: 150px; height: 40px;" class="change">兑换</button>
                                        <div>
                                            <h3>可使用(<span>0</span>)</h3>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default"
                                            data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary">确认</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </h2>
                    <div class="sel">
                        <select>

                            <option value="html">暂无优惠券可用</option>

                        </select>
                    </div>

                </li>
            </ul>
        </div>
    </div>
    <div class="setlement-goods-details-item price">
        <table>
            <tbody>
                <tr>
                    <td><span>1</span>件商品,商品总金额：</td>
                    <td>￥<span id="product_total"></span></td>
                </tr>
                <tr>
                    <td>运费：</td>
                    <td><span>￥0</span></td>
                </tr>
                <tr>
                    <td>应付金额：</td>
                    <td>￥<span id="product_total1"></span></td>
                </tr>
            </tbody>
            <tbody></tbody>
        </table>
    </div>
    <div class="setlement-goods-button">
        <button type="button" style="width: 300px; height:50px">返回购物车</button>
        <button type="button" style="width: 300px; height:50px" class="red">立即结算</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <script src="javascripts/order.js"></script>

</body>

</html>